<template>
  <el-dialog title="配置" :visible.sync="dialogVisible" width="40%" @close="onClose()" v-draggable>
    <span class="my_span mr-3">参数名称</span>
    <el-input v-model="input" placeholder="参数名称模糊查询" @input="getList()"></el-input>

    <el-table :data="tableData" border class="my_table" ref="multipleTable" height="40vh"
              :row-key="getRowKeys" @selection-change="handleSelectionChange">
      <el-table-column prop="parameterName" label="参数名称" align="center"></el-table-column>
      <el-table-column prop="parameterCode" label="参数代码" align="center"></el-table-column>
      <el-table-column prop="parameterValue" label="参数值" align="center"></el-table-column>
      <el-table-column prop="parameterValueName" label="参数值名称" align="center"></el-table-column>
      <el-table-column :reserve-selection="true" type="selection" width="70" align="center"></el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSave">配 置</el-button>
      <el-button type="danger" @click="onUnConfig">取 消 配 置</el-button>
      <el-button @click="onClose()">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { updateDeviceDashboard, queryDeviceRealDataInfo, deleteMyDasPartOne } from "@/api/showManage/index"
  import { updateDeviceQJDashboard, deleteQjDasPartOne } from "@/api/settingManagement/allManagement"

  export default {
    data() {
      return {
        value: "",
        input: "",
        setPar: "",
        selectNum: null,
        options: [],
        tableData: [],
        multipleSelection: [],
        selectData: [],
        dialogVisible: false
      }
    },
    watch: {
      setPar: {
        handler(n, m) {
          if (this.setPar == "oneParam" || this.setPar == "twoParam") {
            this.selectNum = 3
          } else if (this.setPar == "threeParam" || this.setPar == "fourParam" || this.setPar == "fiveParam" || this.setPar == "nineParam") {
            this.selectNum = 1
          } else {
            this.selectNum = null
          }
        },
        deep: true
      }
    },
    methods: {
      getList() {
        queryDeviceRealDataInfo({
          deviceCode: this.$route.query.deviceCode,
          messages: this.input
        }).then((res) => {
          this.tableData = res.object
        })
      },
      getList2(data) {
        if (this.setPar == "oneParam" || this.setPar == "twoParam" || this.setPar == "threeParam" || this.setPar == "fourParam" || this.setPar == "fiveParam") {
          this.toggleSelection(data)
        } else {
          this.toggleSelection2(data)
        }
      },

      getRowKeys(row) {
        return row.parameterCode
      },

      onSave() {
        if (this.multipleSelection.length == 0) return this.$message.error("请选择数据！")
        if (this.selectNum && this.multipleSelection.length > this.selectNum) return this.$message.error("最多只可选择" + this.selectNum + "条数据")
        let obj = {
          deviceCode: this.$route.query.deviceCode
        }
        let url = ""
        this.multipleSelection.map((item, index) => {
          if (index == 0) {
            url += item
          } else {
            url += "&" + item
          }
        })
        obj[this.setPar] = url
        let result = this.$route.query.type == "deviceQuery" ? updateDeviceDashboard : updateDeviceQJDashboard
        result(obj).then((res) => {
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success"
            })
            this.onClose()
            this.$emit("onSave", url)
          }
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val.map((item) => item.parameterCode)
      },

      toggleSelection(data) {
        if (data) {
          this.selectData = []
          data.forEach((val) => {
            this.tableData.forEach((item) => {
              if (item.parameterName == val) {
                this.selectData.push(item)
              }
            })
          })

          this.selectData.forEach((row) => {
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(row)
            })
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },

      toggleSelection2(data) {
        if (data) {
          this.selectData = []
          data.forEach((val) => {
            this.tableData.forEach((item) => {
              if (item.parameterCode == val) {
                this.selectData.push(item)
              }
            })
          })

          this.selectData.forEach((row) => {
            this.$nextTick(() => {
              this.$refs.multipleTable.toggleRowSelection(row)
            })
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },

      onUnConfig() {
        this.$confirm("确定取消配置吗", "删除操作", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true
        }).then(async () => {
          let obj = {
            deviceCode: this.$route.query.deviceCode
          }
          obj[this.setPar] = "close"

          let result = this.$route.query.type == "deviceQuery" ? deleteMyDasPartOne : deleteQjDasPartOne
          result(obj).then((res) => {
            if (res.status == 200) {
              this.$message({
                message: res.message,
                type: "success"
              })
              this.onClose()
              this.$emit("onSave", url)
            }
          })
        })

      },

      onClose() {
        this.value = ""
        this.setPar = ""
        this.options = []
        this.tableData = []
        this.multipleSelection = []
        this.selectData = []
        this.$refs.multipleTable.clearSelection()
        this.dialogVisible = false
      }
    }
  }
</script>
<style scoped lang="scss">
  .el-input {
    width: 220px !important;
  }

  ::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__footer {
      text-align: center !important;
    }
  }

  ::v-deep .el-dialog__header {
    border-radius: 8px 8px 0 0;
    background-color: #e6e6e6;
  }

  .ml-3 {
    margin-left: 12px;
  }

  .my_span {
    font-size: 16px;
  }

  .my_table {
    margin-top: 16px;
  }

  .dialog-foote {
    text-align: center;
  }

  // ::v-deep .el-table {

  //     tr th {
  //         background-color: #e6e6e6;
  //         border-right: none;
  //     }
  // }
</style>
